<template>
    <!-- 商品组 -->
    <view class="diy-goods" :style="'background: ' + itemStyle.background + ';'">
        <view :class="'goods-list display__' + itemStyle.display + ' column__' + itemStyle.column">
            <scroll-view :scroll-x="itemStyle.display === 'slide'">
                <view class="goods-item" v-for="(dataItem, index) in dataList" :key="index">
                    <form @submit="_onTargetGoods">
                        <button formType="submit" class="btn-normal" :data-id="dataItem.goods_id">
                            <!-- 单列商品 -->
                            <block v-if="itemStyle.column == 1">
                                <view class="dis-flex">
                                    <!-- 商品图片 -->
                                    <view class="goods-item_left">
                                        <image class="image" :src="dataItem.image"></image>
                                    </view>
                                    <view class="goods-item_right">
                                        <!-- 商品名称 -->
                                        <view v-if="itemStyle.show.goodsName" class="goods-item_title twolist-hidden">
                                            <text>{{ dataItem.goods_name }}</text>
                                        </view>
                                        <view class="goods-item_desc">
                                            <!-- 商品卖点 -->
                                            <view v-if="itemStyle.show.sellingPoint" class="desc-selling_point dis-flex">
                                                <text class="onelist-hidden">{{ dataItem.selling_point }}</text>
                                            </view>
                                            <!-- 商品销量 -->
                                            <view v-if="itemStyle.show.goodsSales" class="desc-goods_sales dis-flex">
                                                <text>已售{{ dataItem.goods_sales }}件</text>
                                            </view>
                                            <!-- 商品价格 -->
                                            <view class="desc_footer">
                                                <text v-if="itemStyle.show.goodsPrice" class="price_x">¥{{ dataItem.goods_price }}</text>
                                                <text class="price_y col-9" v-if="itemStyle.show.linePrice && dataItem.line_price > 0">¥{{ dataItem.line_price }}</text>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </block>
                            <!-- 多列商品 -->
                            <block v-else>
                                <!-- 商品图片 -->
                                <view class="goods-image">
                                    <image class="image" mode="aspectFill" :src="dataItem.image"></image>
                                </view>
                                <view class="detail">
                                    <!-- 商品标题 -->
                                    <view v-if="itemStyle.show.goodsName" class="goods-name f-28 twolist-hidden">
                                        {{ dataItem.goods_name }}
                                    </view>
                                    <!-- 商品价格 -->
                                    <view class="detail-price onelist-hidden">
                                        <text v-if="itemStyle.show.goodsPrice" class="goods-price f-30 col-m">￥{{ dataItem.goods_price }}</text>
                                        <text v-if="itemStyle.show.linePrice && dataItem.line_price > 0" class="line-price col-9 f-24">￥{{ dataItem.line_price }}</text>
                                    </view>
                                </view>
                            </block>
                        </button>
                    </form>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            dataItem: {
                goods_id: '',
                image: '',
                goods_name: '',
                selling_point: '',
                goods_sales: '',
                goods_price: '',
                line_price: 0
            }
        };
    },
    options: {
        addGlobalClass: true
    },
    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
        itemIndex: String,
        itemStyle: Object,
        params: Object,
        dataList: Object
    },
    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {
        /**
         * 跳转商品详情页
         */
        _onTargetGoods(e) {
            // 记录formid
            app.saveFormId(e.detail.formId);
            uni.navigateTo({
                url: '/pages/goods/index?goods_id=' + e.detail.target.dataset.id
            });
        }
    }
};
</script>
<style lang="scss">
/* common.wxss */

/* @import "../../../utils/common.scss"; */

/* 商品组 */

.diy-goods .goods-list {
    padding: 4rpx;
    box-sizing: border-box;
}

.diy-goods .goods-list .goods-item {
    box-sizing: border-box;
    padding: 6rpx;
}

.diy-goods .goods-list.display__slide {
    white-space: nowrap;
    font-size: 0;
}

.diy-goods .goods-list.display__slide .goods-item {
    display: inline-block;
}

.diy-goods .goods-list.display__list .goods-item {
    float: left;
}

.diy-goods .goods-list.column__2 .goods-item {
    width: 50%;
}

.diy-goods .goods-list.column__3 .goods-item {
    width: 33.33333%;
}

.diy-goods .goods-list .goods-item .goods-image {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
    background: #fff;
}

.diy-goods .goods-list .goods-item .goods-image:after {
    content: '';
    display: block;
    margin-top: 100%; /* margin 百分比相对父元素宽度计算 */
}

.diy-goods .goods-list .goods-item .goods-image .image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
}

.diy-goods .goods-list .goods-item .detail {
    padding: 8rpx;
    background: #fff;
}

.diy-goods .goods-list .goods-item .detail .goods-name {
    height: 72rpx;
    line-height: 1.3;
    white-space: normal;
}

.diy-goods .goods-list .goods-item .detail .detail-price .goods-price {
    margin-right: 8rpx;
}

.diy-goods .goods-list .goods-item .detail .detail-price .line-price {
    text-decoration: line-through;
}

/* 单列商品 */

.diy-goods .goods-list.column__1 .goods-item {
    width: 100%;
    height: 280rpx;
    margin-bottom: 12rpx;
    padding: 20rpx;
    box-sizing: border-box;
    background: #fff;
}

.diy-goods .goods-list.column__1 .goods-item {
    line-height: 1.6;
}

.diy-goods .goods-list.column__1 .goods-item:last-child {
    margin-bottom: 0;
}

.diy-goods .goods-list.column__1 .goods-item_left {
    display: flex;
    width: 40%;
    background: #fff;
    align-items: center;
}

.diy-goods .goods-list.column__1 .goods-item_left .image {
    display: block;
    width: 240rpx;
    height: 240rpx;
}

.diy-goods .goods-list.column__1 .goods-item_right {
    position: relative;
    width: 60%;
}

.diy-goods .goods-list.column__1 .goods-item_right .goods-item_title {
    height: 72rpx;
    margin-top: 20rpx;
    font-size: 28rpx;
    color: $uni-text-color;
}

.diy-goods .goods-list.column__1 .goods-item_right .goods-item_title {
    line-height: 1.3;
}

.diy-goods .goods-list.column__1 .goods-item_desc {
    margin-top: 8rpx;
}

.diy-goods .goods-list.column__1 .desc-selling_point {
    width: 400rpx;
    /* height: 40rpx; */
    font-size: 24rpx;
    color: #ff495e;
}

.diy-goods .goods-list.column__1 .desc-goods_sales {
    color: $uni-text-color-grey;
    font-size: 24rpx;
}

.diy-goods .goods-list.column__1 .desc_footer {
    font-size: 24rpx;
}

.diy-goods .goods-list.column__1 .desc_footer .price_x {
    margin-right: 16rpx;
    color: #f03c3c;
    font-size: 30rpx;
}

.diy-goods .goods-list.column__1 .desc_footer .price_y {
    text-decoration: line-through;
}
</style>
